<template>
  <div>
    <!-- 工具条 -->
    <el-form :inline="true" :data="calendarData" class="demo-form-inline" style="margin-top:40px;margin-left:1%">
      <el-form-item>
        <el-button type="primary" @click="handleAdd">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <div class="initList">
      <el-table v-loading="listLoading" :data="calendarData" highlight-current-row style="width: 100%;">
        <el-table-column type="index"/>
        <el-table-column prop="type" label="类型"/>
        <el-table-column prop="state" label="状态"/>
        <el-table-column prop="startDate" label="开始日期"/>
        <el-table-column prop="endDate" label="结束日期"/>
        <el-table-column prop="title" label="标题"/>
        <el-table-column prop="receiver" label="接收人"/>
        <el-table-column prop="description" label="描述"/>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="success" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
            <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--工具条-->
    <el-col ref="row" :span="24" style="background-color: aliceblue">
      <div style="margin:10px">
        <div class="block" style="float:right;padding:5px 0">
          <el-pagination
            :total="total"
            :current-page.sync="page"
            layout="prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
        </div>
      </div>
    </el-col>
    <!--新增界面-->
    <el-dialog :visible.sync="addFormVisible" :close-on-click-modal="false" title="新增" style="z-index:9999">
      <el-form ref="addForm" :rules="addFormRules" :model="addForm" label-width="80px">
        <el-form-item label="类型" prop="type">
          <el-select v-model="addForm.type" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"/>
            <el-option label="区域二" value="beijing"/>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-select v-model="addForm.state" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"/>
            <el-option label="区域二" value="beijing"/>
          </el-select>
        </el-form-item>
        <el-form-item label="开始日期" prop="startDate">
          <el-date-picker v-model="addForm.startDate" type="date" placeholder="选择日期" />
        </el-form-item>
        <el-form-item label="结束日期" prop="endDate">
          <el-date-picker v-model="addForm.endDate" type="date" placeholder="选择日期"/>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="addForm.title" placeholder="输入学历" />
        </el-form-item>
        <el-form-item label="接收人" prop="receiver">
          <el-input v-model="addForm.receiver" placeholder="输入职位" />
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="addForm.description" type="textarea" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="addLoading" type="primary" @click.native="addSubmit">保存</el-button>
        <el-button @click.native="addFormVisible = false">取消</el-button>
      </div>
    </el-dialog>
    <!--修改界面-->
    <el-dialog :visible.sync="editFormVisible" :close-on-click-modal="false" title="新增" style="z-index:9999">
      <el-form ref="editForm" :rules="editFormRules" :model="editForm" label-width="80px">
        <el-form-item label="类型" prop="type">
          <el-select v-model="editForm.type" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"/>
            <el-option label="区域二" value="beijing"/>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-select v-model="editForm.state" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"/>
            <el-option label="区域二" value="beijing"/>
          </el-select>
        </el-form-item>
        <el-form-item label="开始日期" prop="startDate">
          <el-date-picker v-model="editForm.startDate" type="date" placeholder="选择日期" />
        </el-form-item>
        <el-form-item label="结束日期" prop="endDate">
          <el-date-picker v-model="editForm.endDate" type="date" placeholder="选择日期"/>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="editForm.title" placeholder="输入学历" />
        </el-form-item>
        <el-form-item label="接收人" prop="receiver">
          <el-input v-model="editForm.receiver" placeholder="输入职位" />
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="editForm.description" type="textarea" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="editLoading" type="primary" @click.native="editSubmit">保存</el-button>
        <el-button @click.native="editFormVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
// import { getCalendarListPage, removeCalendar, editCalendar, addCalendar } from '../../api/role'
export default {
  data() {
    return {
      addFormVisible: false,
      addLoading: false,
      listLoading: false,
      editFormVisible: false,
      editLoading: false,
      total: 1,
      page: 2,
      calendarData: [],
      // 新增界面数据
      addForm: {
        type: '',
        state: '',
        startDate: '',
        endDate: '',
        title: '',
        receiver: '',
        description: ''
      },
      addFormRules: {
        type: [{ required: true, message: '请选择事件类型', trigger: 'change' }],
        state: [{ required: true, message: '请选择事件状态', trigger: 'change' }],
        startDate: [{ type: 'date', required: true, message: '请选择事件的开始日期', trigger: 'change' }],
        endDate: [{ type: 'date', required: true, message: '请选择事件的结束日期', trigger: 'change' }],
        title: [{ required: true, message: '请输入事件标题', trigger: 'blur' }],
        receiver: [{ required: true, message: '请选择事件接收人', trigger: 'change' }],
        description: [{ required: true, message: '请输入你的事件描述', trigger: 'blur' }]
      },
      // 编辑界面数据
      editForm: {
        type: '',
        state: '',
        startDate: '',
        endDate: '',
        title: '',
        receiver: '',
        description: ''
      },
      editFormRules: {
        type: [{ required: true, message: '请选择事件类型', trigger: 'change' }],
        state: [{ required: true, message: '请选择事件状态', trigger: 'change' }],
        startDate: [{ type: 'date', required: true, message: '请选择事件的开始日期', trigger: 'change' }],
        endDate: [{ type: 'date', required: true, message: '请选择事件的结束日期', trigger: 'change' }],
        title: [{ required: true, message: '请输入事件标题', trigger: 'blur' }],
        receiver: [{ required: true, message: '请选择事件接收人', trigger: 'change' }],
        description: [{ required: true, message: '请输入你的事件描述', trigger: 'blur' }]
      }
    }
  },
  computed: {
    ...mapGetters([
      'type',
      'state',
      'startDate',
      'endDate',
      'title',
      'receiver',
      'description'
    ])
  },
  methods: {
    // 显示新增界面
    handleAdd: function() {
      this.addFormVisible = true
      this.addForm = {
        type: '',
        state: '',
        startDate: '',
        endDate: '',
        title: '',
        receiver: '',
        description: ''
      }
    },
    handleSizeChange(val) {
      console.log(`${val} items per page`)
    },
    handleCurrentChange(val) {
      this.page = val
      this.getCalendar()
    },
    // 显示编辑界面
    handleEdit: function(index, row) {
      this.editFormVisible = true
      this.editForm = Object.assign({}, row)
      this.flag = 1
    },
    // 删除
    handleDel: function(index, row) {
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        // const para = { role: row.role }
        // removeRole(para).then((res) => {
        //   this.listLoading = false
        //   this.$message({
        //     message: '删除成功',
        //     type: 'success'
        //   })
        //   this.getRoles()
        // })
      }).catch(() => {

      })
    },
    // 保存新增
    addSubmit: function() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.addLoading = true
            // const para = Object.assign({}, this.addForm)
            // console.log(para)
            // const myPara = {
            //   description: para.description,
            //   role: para.role,
            //   parentRole: para.parentRole,
            //   parentId: this.$refs.treeRoles.getCheckedNodes()[0].id
            // }
            // console.log(myPara.parentId)
            // addRole(myPara).then((res) => {
            //   this.addLoading = false
            //   this.$message({
            //     message: '提交成功',
            //     type: 'success'
            //   })
            //   this.$refs['addForm'].resetFields()
            //   this.addFormVisible = false
            //   this.getRoles()
            // })
          })
        }
      })
    },
    // 编辑提交
    editSubmit: function() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.editLoading = true
            // const para = Object.assign({}, this.editForm)
            // console.log(para)
            // const myPara = {
            //   newRole: para.newRole,
            //   description: para.description,
            //   role: para.role,
            //   parentRole: para.parentRole,
            //   parentId: this.$refs.treeRoles.getCheckedNodes()[0].id
            // }
            // editRole(myPara).then((res) => {
            //   this.editLoading = false
            //   this.$message({
            //     message: '提交成功',
            //     type: 'success'
            //   })
            //   this.$refs['editForm'].resetFields()
            //   this.editFormVisible = false
            //   this.getRoles()
            // })
          })
        }
      })
    }
  }
}
</script>

<style scoped>
  .container{
    width: 94%;
    margin-left: 3%;
    height: 100%;
  }
  .el-dialog{
    width: 800px
  }
  .el-loading-mask{
    z-index: 1000;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .table-list{
    width: 100%;
  }
</style>
